<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>城市酒店一览</title>
    <link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css' />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Custom Theme files -->
    <link th:href="@{/css/style.css}" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!--webfont-->
    <script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/login.js}"></script>
    <script th:src="@{/js/jquery.easydropdown.js}"></script>
    <!--Animation-->
    <script th:src="@{/js/wow.min.js}"></script>
    <link th:href="@{/css/animate.css}" rel='stylesheet' type='text/css' />
    <link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}">
    <!-- DataTables -->
    <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}">
    <script>
        new WOW().init();
    </script>
</head>
<body>
<div class="header">
    <div class="col-sm-8 header-left">
        <div class="logo">
            <a href="index.html"><img th:src="@{/images/logo.png}" alt=""/></a>
        </div>
        <div class="menu">
            <a class="toggleMenu" href="#"><img th:src="@{/images/nav.png}" alt="" /></a>
            <ul class="nav" id="nav">
                <li><a th:href="@{/toUserLogin}">首页</a></li>
                <li><a th:href="@{/toRooms}">房间</a></li>
                <li><a href="news.html">新闻</a></li>
                <li><a th:href="@{/toGallery}">旗下酒店</a></li>
                <li><a href="/userOrder/userorder">我的订单</a></li>
                <li><a th:href="@{/EditUser/findUserId}">个人中心</a></li>
                <li><a href="404.html">社区</a></li>
                <div class="clearfix"></div>
            </ul>
            <script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
        </div>
        <!-- start search-->
        <div class="search-box">
            <div id="sb-search" class="sb-search">
                <form>
                    <input class="sb-search-input" placeholder="请输入你要查询的关键字" type="search" name="search" id="search">
                    <input class="sb-search-submit" type="submit" value="">
                    <span class="sb-icon-search"> </span>
                </form>
            </div>
        </div>
        <!--search-scripts-->
        <script th:src="@{/js/classie.js}"></script>
        <script th:src="@{/js/uisearch.js}"></script>
        <script>
            new UISearch( document.getElementById( 'sb-search' ) );
        </script>
        <!--search-scripts-->
        <div class="clearfix"></div>
    </div>
    <div class="col-sm-4 header_right">
        <div id="loginContainer"><a href="#" id="loginButton"><img th:src="@{/images/login.png}">
            <span th:if="${session.user != null}" th:text="${session.user.userName}">登录</span>
            <span th:if="${session.user == null}" >登录</span>
        </a>
            <div id="loginBox">
                <form id="loginForm" th:action="@{/userLogin/login}" method="post">
                    <fieldset id="body">
                        <fieldset>
                            <label for="userName">用户名</label>
                            <input type="text" name="userName" id="userName">
                        </fieldset>
                        <fieldset>
                            <label for="password">密码</label>
                            <input type="password" name="userPassword" id="password">
                        </fieldset>
                        <input type="submit" id="login" value="登录">
                        <input type="submit" id="regist" value="注册" ><a href="regist.html"></a>
                        <label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住密码</i></label>
                    </fieldset>
                    <span><a href="#">忘记密码?</a></span>
                </form>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>

<div class="banner">
    <div class="container_wrap">
        <h1>目的地?</h1>
        <div class="dropdown-buttons">
            <div class="dropdown-button">
                <select name="cityName" id="cityName" class="dropdown"  tabindex="9" data-settings='{"wrapperClass":"metro"}'
                        style="
                   display: block;
                   font-size: 1.4em;
                   padding: 2px 60px 10px 5px;
                   overflow: hidden;
                   white-space: nowrap;
                   text-align: left;
                   font-weight: 300;
                   color: white;
                   border-radius: 1em 1em 1em;
                   background-color: #230d0d;
                   outline-color: transparent;
                   width: 100%">
                </select>
            </div>
            <div class="dropdown-button">
                <select name="hotelName" id="hotelName" class="dropdown" tabindex="9" data-settings='{"wrapperClass":"metro"}'
                        style="
                    display: block;
                    font-size: 1.4em;
                    padding: 2px 30px 10px 5px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-align: left;
                    font-weight: 300;
                    color: white;
                    border-radius: 3em 3em 3em;
                    background-color:#230d0d;
                    outline-color: transparent;
                    width: 100%">

                </select>
            </div>
        </div>
        <form th:action="@{/hotelSearch/search}" th:method="POST">
            <input type="text" value="输入酒店关键字"name="searchhotel"  onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '输入目的地关键字';}"
                   style="margin-right: 0.92em;
              width: 37%;">

            <label class="btn1 btn-2 btn-2g"><input name="submit" type="submit"  value="搜索"></label>

        </form>
        <div class="clearfix"></div>
    </div>
</div>

<!--<h2 class="title block-title">酒店展示</h2>-->

<div class="living_middle" style="padding: 5em 0;">
    <div class="container">
<div th:each="c:${hotel}">
    <div class="col-md-4 wow fadeInLeft" data-wow-delay="0.4s" style="padding-left: 15px; padding-right: 15px;padding-bottom: 15px;">
        <div class="living_box"style="width: 100%;"><a href="#">
            <img style="width:330px ;height: 220px; " th:src="@{'/myfile/'+${c.fileName}}" class="img-responsive" alt=""/>
            <span class="sale-box">
				   <span class="sale-label">hotel</span>
				 </span>
        </a>
            <div class="living_desc">
                <h3 id="hotelName"><a href="#">[[${c.hotelName}]]</a></h3>
                <p id="cityName">[[${c.cityName}]]</p>
                <a th:href="@{/hotelSearch/searchRoom(id=${c.hotelId})}" class="btn3">查看房间</a>
                <a class="btn3 collect">收藏酒店
                    <span class="hotelid" th:id="${c.hotelId}"></span>
                </a>

                <!--<a th:href="@{}" class="btn3">预订</a>-->
            </div>
            <table border="1" class="propertyDetails">
                <tbody>


                </tbody></table>
        </div>
    </div>
</div>
</div>
</div>

<div class="footer">
    <div class="container">
        <div class="footer_top">
            <h3>订阅我们的通知</h3>
            <form>
		<span>
			<i><img th:src="@{/images/mail.png}" alt=""></i>
		    <input type="text" value="请输入您的邮箱地址" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入您的邮箱地址';}">
		    <label class="btn1 btn2 btn-2 btn-2g"> <input name="submit" type="submit" id="submit" value="订阅"> </label>
		    <div class="clearfix"> </div>
		</span>
            </form>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>

</div>

</body>
<script>
    $('.collect').click(function () {
        var id = $(this).find(".hotelid").attr("id");

        $('.collect').click(function () {
            var id = $(this).find(".hotelid").attr("id");

            $.get('/EditUser/collectHotel?id='+id,function (text) {
                if('ok'==text){
                    alert("收藏成功,可在个人中心进行查看");
                }else if('error' == text){
                    alert("已收藏");
                }
            })
        })
    })
    //点击城市信息下拉框
    $('#cityName').on('change',function () {
        var cityName = $(this).val();
        window.location.href='/cityHotel/hotelView?cityName='+cityName;
    })
    //点击酒店信息显示
    $('#hotelName').on('change',function () {
        var hotelName = $(this).val();
        window.location.href='/cityHotel/roomView?hotelName='+hotelName;
    })

    window.onload = function(){
        $.ajax({
            async:false,
            type:"POST",
            url:"/cityHotel/cityhotel",
            dataType:"json",
            data:{
                // warehouse: $("#cityName").val(),
            },
            success:function (data) {
                console.log(data);
                $("#cityName").append("<option>"+'选择'+"</option>option>");
                for (var i = 0; i<data.length;i++){
                    $("#cityName").append("<option >" + data[i].cityName + "</option>");

                }
            }
        })

        $.ajax({
            async:'true',
            type:"POST",
            url:"/cityHotel/hotel",
            dataType:"json",
            data:{
                // warehouse: $("#hotelName").val(),
            },
            success:function (data) {
                console.log(data);
                $("#hotelName").append("<option>"+'选择'+"</option>option>");
                for (var i = 0; i<data.length;i++){
                    $("#hotelName").append("<option >" + data[i].hotelName + "</option>");

                }
            }
        })
    }
</script>
</html>